<template>
  <div class="page-content" v-loading="loading">
    <div class="head">
      <el-button type="primary" icon="el-icon-search" @click="opensearch">查询</el-button>
      <el-button type="info" icon="el-icon-refresh-right" @click="refresh">查询</el-button>
  </div>
      <div id="viewer"></div>
  <el-col :span="8" v-for="(item, index) in ProList" :key="index"  :xs="24" :sm="16" :md="8" :lg="4" >
    <el-card :body-style="{ padding: '0px' }" shadow="hover" class="procard" >
      <img :src="item.images.split(',')[0]" class="image">
      <div style="padding: 14px;">
        <p>零件编码：{{item.pjcode}}</p>
        <p>零件名称：{{item.pjname}}</p>
        <p>零件车型：{{item.pjsize}}</p>
        <p>零件产地：{{item.pjfactory}}</p>
        <p>零件品牌：{{item.pjbrand}}</p>
        <div class="bottom clearfix">
          <el-button type="primary" class="button" @click="upimg(item.pjname,item.pjid,item.images,item.imagesid)">上传图片<i class="el-icon-upload el-icon--right"></i></el-button>
        </div>
      </div>
    </el-card>
  </el-col>
   <el-col :lg="24" >
  <!-- 分页 -->
    <el-pagination
      background
      :page-size="pageSize"
      :total="total"
      :page-sizes="[10, 20, 30, 40, 50, 60, 70, 80]"
      :current-page.sync="page"
      @current-change="changePage"
      layout="total, prev, pager, next, jumper"
    />
    </el-col>
    <el-dialog :title="imgform.name" 
    :visible.sync="imgFormVisible" 
    :close-on-click-modal="false"
     @close="clearimg"
      >
    <el-upload
  :action="dataUrl"
  list-type="picture-card"
  :on-preview="handlePictureCardPreview"
  :on-remove="handleRemove"
  :file-list="fileList"
  accept="image/*">
  <i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="dialogVisible" :title="imgform.name" append-to-body>
  <img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>
    </el-dialog>
    <el-dialog  :visible.sync="searchFormVisible" 
    :close-on-click-modal="false"
     title="查询"
     width="30%"
     @close="resetForm('searchForm')">
   <el-form ref="searchForm" :model="searchForm" label-width="100px" >
  <el-row>
     <el-tooltip class="item" effect="dark" content="*号全模糊，支持编码+车型" placement="top">
    <form-input label="零件编码" v-model="searchForm.pjcode" @keyup.enter.native="submitForm('searchForm')" prop="pjcode"></form-input>
     </el-tooltip>
  </el-row>
  <el-row >
     <form-input label="零件名称" v-model="searchForm.pjname" @keyup.enter.native="submitForm('searchForm')" prop="pjname"></form-input>
  </el-row>
  <el-row >
     <form-input label="零件车型" v-model="searchForm.pjsize" @keyup.enter.native="submitForm('searchForm')" prop="pjsize"></form-input>
  </el-row>
  <el-row >
     <form-input label="零件产地" v-model="searchForm.pjfactory" @keyup.enter.native="submitForm('searchForm')" prop="pjfactory"></form-input>
  </el-row>
  <el-row >
     <form-input label="零件品牌" v-model="searchForm.pjbrand" @keyup.enter.native="submitForm('searchForm')" prop="pjbrand"></form-input>
  </el-row>
  <el-row style="float:right;margin-bottom:20px">
    <el-button type="primary" @click="submitForm('searchForm')">查询</el-button>
    <el-button @click="resetForm('searchForm')">取消</el-button>
  </el-row>
</el-form>
    </el-dialog>
  </div>
</template>
<script>
 import { getPjbaseApi } from '@/api/cardApi'
 import { delpjimgApi } from '@/api/cardApi'
 import { baseUrl } from "@/utils/config"

 import {Viewer} from 'photo-sphere-viewer'
 import MarkersPlugin from 'photo-sphere-viewer/dist/plugins/markers'
 import 'photo-sphere-viewer/dist/photo-sphere-viewer.css'
 import 'photo-sphere-viewer/dist/plugins/markers.css'
 export default {
    inject: ['reload'],
    data() {
      return {
        page: 1,
        pageSize: 18,
        total: 0,
        ProList: [],
        loading: true,
        ispic:0,
        searchForm:{
          pjcode:'',
          pjname:'',
          pjsize:'',
          pjfactory:'',
          pjbrand:''
        },
        imgform:{
          name:''
        },
        imgFormVisible:false,
        searchFormVisible:false,
        dialogImageUrl: '',
        dialogVisible: false,
        fileList:[],
        dataUrl:baseUrl+"/api/Show/upload_Imgurl",
        viewer:'',
        imgurl1:require('../../assets/img/1.jpg'),
        imgurl2:require('../../assets/img/2.jpg'),
        imgurl3:require('../../assets/img/3.jpg')
      }
    },
    mounted() {
      this.getPjbaseData(1)
       this.viewer = new Viewer({
                container:document.querySelector('#viewer'),
                panorama:this.imgurl1,
                size:{
                    width: '100vw',
                    height: '50vh',
                },
                plugins: [
                    [MarkersPlugin, {
                        markers: [
                            {
                                id:'circle',
                                tooltip:'A circle of radius 30',
                                circle:30,
                                svgStyle : {
                                    fill:'rgba(255,255,0,0.3)',
                                    stroke:'yellow',
                                    strokeWidth:'2px',
                                },
                                longitude: -1.5,
                                latitude: -0.28,
                                anchor: 'center right',
                            }
                        ],
                    }],
                ],
            });

            const markersPlugin = this.viewer.getPlugin(MarkersPlugin);

            markersPlugin.on('select-marker', (e, marker) => {
                this.viewer.animate({
                    longitude: marker.config.longitude,
                    latitude: marker.config.latitude,
                    zoom: 100,
                    speed: '-2rpm',
                }).then(() =>
                    this.viewer.setPanorama(
                        this.imgurl2
                    ).then(() =>
                        markersPlugin.updateMarker({
                            id: marker.id,
                            longitude: -1.8,
                            latitude: -0.28,
                        }),
                        this.viewer.animate({
                            zoom: 50,
                            speed: '2rpm',
                        }).then(() =>
                            this.imgurl2 = this.imgurl3,
                            console.log("继续操作")
                        )
                    )
                )
      });
    },
    methods: {
      getPjbaseData(pageindex){
        let userdata =JSON.stringify(this.$store.state.user.user.info);
        userdata=JSON.parse(userdata);
        let guestcode =userdata.reguserno;
        let gscode =userdata.gscode;
        getPjbaseApi({
          guestcode: guestcode,
          gscode:gscode,
          pagesize:this.pageSize,
          pageindex:pageindex,
          pjcode:this.searchForm.pjcode,
          pjname:this.searchForm.pjname,
          pjsize:this.searchForm.pjsize,
          pjfactory:this.searchForm.pjfactory,
          pjbrand:this.searchForm.pjbrand
        }).then(res => {
         this.loading=false
         this.ProList=res.data
         this.total=res.datacount
         this.searchFormVisible=false
        })
      },
      changePage(val){
        this.getPjbaseData(val)
      },
      submitForm(formName){
        this.getPjbaseData(this.page)
      },
      clearimg(){
        this.fileList=[]
        this.dataUrl=baseUrl+"/api/Show/upload_Imgurl"
        this.getPjbaseData(this.page)
      },
      upimg(name,pjid,imglist,idlist){
        let userdata =JSON.stringify(this.$store.state.user.user.info);
        userdata=JSON.parse(userdata);
        let guestcode =userdata.reguserno;
        let gscode =userdata.gscode; 
        this.imgFormVisible=true
        this.imgform.name=name
        for(var i = 0; i < imglist.split(',').length; i++)
        {
          this.fileList.push({name:'',url:imglist.split(',')[i],id:idlist.split(',')[i],pjid:pjid})
        }
        this.dataUrl=this.dataUrl+"?guestcode="+guestcode+"&gscode="+gscode+"&pjid="+pjid
      },
       handleRemove(file, fileList) {
        let userdata =JSON.stringify(this.$store.state.user.user.info);
        userdata=JSON.parse(userdata);
        let guestcode =userdata.reguserno;
        let id = file.id
        let pjid = file.pjid
        delpjimgApi({
          guestcode: guestcode,
          id:id,
          pjid:pjid
        }).then(res => {
           if(res.code=="0"){
           this.$message.success(res.msg);
           this.getPjbaseData(this.page)
           }
        })
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      opensearch(){
        this.searchFormVisible=true
      },
      resetForm(formName) {
       this.searchFormVisible=false
       this.$refs[formName].resetFields()
     },
     refresh() {
        this.reload()
      }
    }
 }
</script>
<style lang="scss" scoped>
  .page-content {
    height: 100%;
    overflow: hidden;
    .head{
      margin-left: 10px;
      margin-bottom: 10px;
      span{
        margin-right: 10px;
      }
      .el-radio{
        margin-right: 10px;
      }
    }
  .procard{
    width:90%;
    margin: 0 auto;
    margin-bottom: 10px;
    p{
      overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
  font-size: 14px;
    }
  }
  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }

  .button {
    float: right;
  }

  .image {
    width: 100%;
    display: block;
  }

  .clearfix:before,
  .clearfix:after {
      display: table;
      content: "";
  }
  
  .clearfix:after {
      clear: both
  }

  ::v-deep .el-dialog{
    overflow: hidden !important;
  }
  }
  @media only screen and (max-width: $device-ipad) {
  .page-content {
  .el-upload-list--picture-card .el-upload-list__item{
    margin: 0 5px 8px 0;
  }
  }
  }
</style>